<template>
    <master :title="title">
        <div class="custom-tree-container">
            <div class="block">
                <el-select v-model="selectedCourseId" placeholder="请选择课程" style="width: 200px;">
                    <el-option v-for="item in SpCoursedata" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="fetchChapterList">切换课程</el-button>
                <el-button type="primary" @click="showtopicDialog">生成题目</el-button>
                <el-button type="primary" @click="shownodeDialogs">新增章节</el-button>

                <!-- <p>使用 scoped slot</p> -->
                <el-tree :data="datas" highlight-current="true" default-expand-all="true" show-checkbox node-key="id"
                    :expand-on-click-node="false" :props="params" @node-click="handleNodeClick"
                    @node-expand="openTreeNode" @node-collapse="closeTreeNode" ref="tree"
                    @node-contextmenu="openTreeMenu" @check="checkChange">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span style="color: rgb(35, 132, 212);" class="el-icon-s-promotion" :style="{ display: activeNodeId === data.id ? 'inline-block' : 'none' }"></span>
                        <span>
                            <el-button type="text" size="mini" @click="() => append(node,data)">
                                新增
                            </el-button>
                            <el-button type="text" size="mini" @click="() => remove(node, data)">
                                删除
                            </el-button>
                        </span>
                    </span>
                </el-tree>


                <div v-show="showTreeMenu" class="treeMenu">
                    <div @click="addOrg">
                        <i class="el-icon-plus" style="color: #1e9fff"></i>
                        增加子分组
                    </div>
                    <div @click="editOrg">
                        <i class="el-icon-edit" style="color: #fcc465"></i>
                        修改分组名称
                    </div>
                    <!-- <div @click="deleteOrg">
                  <i class="el-icon-delete" style="color: red"></i>
                  删除分组及子分组
                </div> -->
                    <div @click="showDialog">
                        <i class="el-icon-plus" style="color: #65fc9a"></i>
                        课程讲解
                    </div>
                </div>


            </div>
        </div>

        <!-- 添加子分组对话框 -->
        <el-dialog title="添加子分组" :visible.sync="addOrgDialogVisible" width="30%" style="margin: 20px;position: absolute;top: 35%;">
            <el-input v-model="newOrgLabel" placeholder="子分组名称"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addOrgDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmAddOrg">确定</el-button>
            </span>
        </el-dialog>

        <!-- 添加子分组对话框右边版本 -->
        <el-dialog title="添加子分组" :visible.sync="addOrgDialogVisible3" width="30%" style="margin: 20px;position: absolute;top: 35%;">
            <el-input v-model="newOrgLabel3" placeholder="子分组名称"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addOrgDialogVisible3 = false">取消</el-button>
                <el-button type="primary" @click="confirmAddOrg3">确定</el-button>
            </span>
        </el-dialog>

        <!-- 添加子分组对话框根节点本 -->
        <el-dialog title="添加子分组" :visible.sync="shownodeDialog" width="30%" style="margin: 20px;position: absolute;top: 35%;">
            <el-input v-model="newOrgLabel4" placeholder="子分组名称"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="shownodeDialog = false">取消</el-button>
                <el-button type="primary" @click="shownodeDialogs2">确定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="新增节点" :visible.sync="dialogVisible" width="30%" style="margin: 20px;position: absolute;top: 35%;">
            <el-input v-model="newLabel" placeholder="节点名称"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmAppend">确定</el-button>
            </span>
        </el-dialog>

        <!-- 修改分组名称对话框 -->
        <el-dialog title="修改分组名称" :visible.sync="editOrgDialogVisible" width="30%" style="position: absolute;top: 35%;">
            <el-input v-model="editOrgLabel" placeholder="新分组名称" :value="currentOrgLabel"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editOrgDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmEditOrg">确定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="课程资料" :visible.sync="dialogVisible11111" :modal="false" width="50%" style="display: none;"
            :before-close="hideDialog">
            <listpage ref="listpage"></listpage> <!-- 列表数据 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="hideDialog">取 消</el-button>
                <el-button type="primary" @click="hideDialog">确 定</el-button>
            </span>
        </el-dialog>
        <!-- <el-button type="text" @click="showDialog">点击打开 Dialog</el-button> -->



    </master>
    <topic-dialog :visible="topicdialogVisible" @close="handleClose" @saveDraft="handleSaveDraft"
        @confirmPublish="handleConfirmPublish" @publishSuccess="handlePublishSuccess" :course-id="selectedCourseId"
        :chapter="checkedNodesdata" :half-checked-nodesdata="halfCheckedNodesdata">
    </topic-dialog>

    
</template>
<script type="text/javascript">
    (function (G) {
        var _this = null;
        G.vue({
            "usingComponents": {///引入组件
                "master": "/components/Master/Master",///母版组件
                "listpage": "/components/List/Page/Page",///通用列表组件
                "modal": "/components/Modal/Modal",
                "topic-dialog": "/components/TopicDialog/TopicDialog",
            },
            "enablePullDownRefresh": true
        }, G.modelList({///配置listpage组件
            modelName: 'sp_chapter_data',///entity名称
            title: '章节资源列表',
            listPage(list, query) {///query为前一个页面传过来的参数
                let type = query.type
                // list.getUrl = '/api/model/v_course?join=user';///列表请求API
                list.getUrl = '/api/model/sp_chapter_data';///列表请求API
                if (query.type) list.getUrl += '&type=' + query.type
                list.searchKey = 'dpfaddress,videoaddress,summary,introduce'///搜索字段，来源于列表数据模型
                ///list.canCheck = false ///取消选中按钮 同时取消批量删除
                ///list.canBack = true ///添加返回上一页按钮
                ///list.actions.add = false ///取消新增按钮
                ///list.actions.delet = undefined ///取消行删除按钮
                ///list.actions.edit = undefined ///取消行修改按钮
                // list.models = {/// 列表数据模型，默认使用后台返回对应的模型
                //   id:{
                //     label:'编号'
                //   }
                // }
            },
            modeleditquery(edit, event, query) {///编辑页面 edit对象，event事件，query前一个页面传过来的参数
                if (query.type) {
                    edit.values.type = query.type
                    edit.models.type.type = ''
                }
                // edit.models = {///编辑数据模型，默认使用后台返回的对应模型
                //   title:{
                //     label:'标题',
                //     type:'input'
                //   }
                // }
                ///edit.readOnly = true ///设置页面只读
                ///edit.meth = 'PUT' ///请求方式
                ///edit.url = '/api/model/article' ///请求地址
            }
        }, {
            data: {
                // 新增根节点
                shownodeDialog: false,
                newOrgLabel4: '',

                //出题
                topicdialogVisible: false,
                // topicdialogdata: {
                checkedNodesdata: null,
                checkedKeysdata: null,
                halfCheckedNodesdata: [],
                halfCheckedKeysdata: null,

                // },
                //顶部选择器
                selectedCourseId: "1313921323726012416",
                SpCoursedata: null,

                //转圈和右边添加
                show: false,
                dialogVisible11111: true,
                /* 111111111111111111111111111 Ai视频资料数据 111111111111111111111111111111111 */
                showvideodialog: false, // 控制弹窗显示
                videoSrc: "../../images/video.mp4", // 视频路径

                showtabledialog: false,
                tableData: [{
                    vedio: '视频名字1',
                    pdfs: 'PDF1',
                    importantss: '章节重点1'
                }, {
                    vedio: '视频名字2',
                    pdfs: 'PDF2',
                    importantss: '章节重点2'
                }, {
                    vedio: '视频名字3',
                    pdfs: 'PDF3',
                    importantss: '章节重点3'
                }, {
                    vedio: '视频名字4',
                    pdfs: 'PDF4',
                    importantss: '章节重点4'
                }],

                /* 1111111111111111111111111111 原本的树节点定义数据 11111111111111111111111111111111 */
                //章节数据
                datas: [],
                params: {
                    children: 'children',
                    label: 'label',
                },
                id: 1000,
                dialogVisible: false, // 对话框是否显示

                /* 1111111111111111111111111111 覃泳淇定义的数据 11111111111111111111111111111111 */
                newLabel: '', // 新节点名称
                currentNode: null, // 当前操作的节点
                showTreeMenu: false,
                openTreeNode: '',
                closeTreeNode: '',
                contextNode: {},    //右键存放data的数据
                nodes: {},     //右键存放nodes的数据
                addOrgDialogVisible: false, // 添加子分组对话框是否显示
                newOrgLabel: '', // 新子分组名称
                editOrgDialogVisible: false, // 修改分组名称对话框是否显示
                editOrgLabel: '', // 修改后的分组名称输入框数据
                currentOrgLabel: '', // 当前分组名称

                /* 111111111111111111111111111 实现右边新增对话框显示 111111111111111111111111111111111 */
                contextNode3: {},    //右边存放data的数据
                nodes3: {},     //右边存放nodes的数据
                addOrgDialogVisible3: false, // 添加子分组对话框是否显示
                newOrgLabel3: '', // 新子分组名称
                activeNodeId: null, // 存储当前激活节点的 id
            },
            methods: {
                //新增根节点
                shownodeDialogs() {
                    if (!this.selectedCourseId) {
                        this.$message({
                            message: '请选择课程',
                            type: 'info'
                        });
                        return
                    }
                    this.shownodeDialog = true;
                },
                shownodeDialogs2() {
                    this.datas = []
                    //1、新增对象的定义
                    let editForm = {
                        parentId: 0,//已有的id
                        name: this.newOrgLabel4,//输入的名字
                        type: 1,//层级
                        spCourseId: this.selectedCourseId
                    }
                    // console.log("editForm", editForm);
                    // 2、新增
                    G.post('{JAVAURL}/sp-chapter/chapterAdd', editForm).then(res => {
                        if (!res.errorMsg) {
                            // console.log("res", res);
                            let nodeId = res.data.id

                            //3、新增节点之前需要获取数据库里新添加的id作为节点的id
                            //如果存在v-model获取输入的值
                            if (this.newOrgLabel4) {
                                const label = this.newOrgLabel4;
                                const newChild = { id: nodeId, label, children: [] };
                                //如果右键点击的事件获取到了node，并且node存在子节点  
                                this.datas.push(newChild);
                                console.log("this.datas.push(newChild);", this.datas);

                                // 表单隐藏
                                this.shownodeDialog = false
                                G.toask('添加根章节成功')
                            }
                        }
                    })
                },
                /* 1111111111111111111111111111 覃泳淇需要的数据 11111111111111111111111111111111 */
                // 显示出题
                showtopicDialog() {
                    console.log("this.selectedCourseId", this.selectedCourseId);
                    console.log("this.checkedNodesdata", this.checkedNodesdata);


                    if (!this.selectedCourseId || !this.checkedNodesdata) {
                        this.$message({
                            type: 'info',
                            message: '请选择课程或知识点'
                        });
                        return
                    }
                    this.topicdialogVisible = true
                },
                handleClose() {
                    this.topicdialogVisible = false;
                },
                handleSaveDraft(questions) {
                    console.log('保存草稿', questions);
                    // 实现保存草稿的逻辑
                },
                handleConfirmPublish(questions) {
                    // 发布成功后刷新列表
                    this.getList22();
                },
                // 添加发布成功的处理方法
                handlePublishSuccess() {
                    // 刷新题目列表
                    this.getList22();
                },
                // 获取分页数据的函数
                getList22() {
                    G.get('{JAVAURL}/sp-topic/list', this.params)  // 请输入后端接口，params 传递题目名称和分页参数
                        .then((res) => {
                            this.total = res.total;  // 总条数
                            this.rows = res.rows;    // 当前页数据
                        })
                        .catch(() => {
                        });
                },
                /* 1111111111111111111111111111 覃泳淇需要的数据 11111111111111111111111111111111 */
                /* 1111111111111111111111111111 覃泳淇需要的数据 11111111111111111111111111111111 */
                checkChange(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
                    console.log("节点数据", checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys);
                    this.checkedNodesdata = checkedNodes
                    this.halfCheckedNodesdata = checkedKeys.halfCheckedNodes
                    // 更新当前激活节点的 id
                    this.activeNodeId = checkedNodes.id;
                    // this.checkedKeysdata = checkedKeys
                    // this.halfCheckedNodesdata = halfCheckedNodes
                    // this.halfCheckedKeysdata = halfCheckedKeys
                },
                /* 1111111111111111111111111111 覃泳淇需要的数据 11111111111111111111111111111111 */
                showDialog() {
                    const dialog = document.querySelector("#pages_chapter_datalist > div.components_Master_Master > div > div:nth-child(4) > div:nth-child(7)"); // 获取对话框元素
                    dialog.style.display = "block"; // 通过 display 显示对话框
                },
                hideDialog() {
                    const dialog = document.querySelector("#pages_chapter_datalist > div.components_Master_Master > div > div:nth-child(4) > div:nth-child(7)"); // 获取对话框元素
                    dialog.style.display = "none"; // 通过 display 隐藏对话框
                },
                /* 1111111111111111111111111111 覃泳淇定义的数据 11111111111111111111111111111111 */
                // 提示方法
                addOrg() {
                    if (!this.selectedCourseId) {
                        this.$message({
                            message: '请选择课程',
                            type: 'info'
                        });
                        return
                    }
                    console.log('添加子分组', this.contextNode)
                    this.addOrgDialogVisible = true;
                },
                editOrg() {
                    console.log('修改分组名称', this.contextNode)
                    this.currentOrgLabel = this.contextNode.label;
                    this.editOrgDialogVisible = true;
                },
                deleteOrg() {
                    this.$confirm('此操作将删除 [${this.contextNode.label}] 分组、下级子分组, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });

                        //清空列表
                        // const parent1 = this.nodes.parent;
                        // const children1 = parent1.data.children || parent1.data;
                        // const index1 = children1.findIndex(d => d.id === data.id);
                        // console.log('index1', index1);
                        // console.log('children1', children1);
                        // console.log('parent1', parent1);
                        // children1.splice(index1, 1);
                        //删除
                        G.delete('{JAVAURL}/sp-chapter/deleteByid?id=' + this.contextNode.id)
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                /* 1111111111111111111111111111 覃泳淇定义的数据 11111111111111111111111111111111 */

                /* 1111111111111111111111111111 右键课程讲解视频方法 11111111111111111111111111111111 */
                handleCellClick111(row, column, cell, event) {
                    console.log('Clicked cell:', { row, column });
                },
                //显示视频
                showVideo() {
                    // console.log("11111", 11111);
                    // 直接展示视频
                    // this.showvideodialog = true;
                    this.showtabledialog = true;

                },
                // 关闭视频弹窗
                closeDialog() {
                    this.showvideodialog = false;
                    this.stopVideo(); // 确保关闭时停止视频

                    this.showtabledialog = false;
                },
                // 停止视频播放
                stopVideo() {
                    const video = this.$refs.videoPlayer;
                    if (video) {
                        video.pause(); // 暂停视频
                        video.currentTime = 0; // 可选：重置到视频开头
                    }
                },
                onVideoLoaded() {
                    console.log("视频已加载");
                },
                onVideoError() {
                    console.error("视频加载失败，请检查视频路径");
                },
                /* 1111111111111111111111111111 右键课程讲解视频数据 11111111111111111111111111111111 */

                /* 1111111111111111111111111111 覃泳淇定义的数据 11111111111111111111111111111111 */
                // 右键点击获取数据
                openTreeMenu(event, data, node, target) {
                    console.log("event, data, node, target", event, data, node, target)
                    this.showTreeMenu = true // 显示菜单
                    this.contextNode = data // 存储数据
                    this.nodes = node
                    document
                        .querySelector('.treeMenu')
                        .setAttribute('style', `top:${event.clientY + 10}px;left:${event.clientX + 10}px;`)
                    document.addEventListener('click', this.closeTreeMenu)
                    document.addEventListener('contextmenu', this.closeTreeMenu)
                },
                closeTreeMenu() {
                    this.showTreeMenu = false // 关闭菜单
                    document.removeEventListener('click', this.closeTreeMenu)
                    document.removeEventListener('contextmenu', this.closeTreeMenu)
                },
                /* 1111111111111111111111111111 覃泳淇定义的数据 11111111111111111111111111111111 */

                /* 1111111111111111111111111111 tree自带的方法 11111111111111111111111111111111 */
                // 实际方法
                // 1、右边添加
                append(node, data, label) {
                    if (!this.selectedCourseId) {
                        this.$message({
                            message: '请选择课程',
                            type: 'info'
                        });
                        return
                    }
                    // 调用前清空数据
                    this.contextNode3 = {}    //右边存放data的数据
                    this.nodes3 = {}    //右边存放nodes的数据
                    this.newOrgLabel3 = '', // 新子分组名称
                        console.log("右边添加data", data);
                    console.log("右边添加node", node);


                    this.contextNode3 = data
                    this.nodes3 = node
                    this.addOrgDialogVisible3 = true // 添加子分组对话框是否显示
                },
                confirmAddOrg3() {
                    // data.id 是parent_i

                    //1、新增对象的定义
                    let editForm = {
                        parentId: this.contextNode3.id,//已有的id
                        name: this.newOrgLabel3,//输入的名字
                        type: this.nodes3.level,//层级
                        spCourseId: this.selectedCourseId
                    }
                    // console.log("editForm", editForm);
                    // 2、新增
                    G.post('{JAVAURL}/sp-chapter/chapterAdd', editForm).then(res => {
                        if (!res.errorMsg) {
                            console.log("res", res);
                            let nodeId = res.data.id

                            //3、新增节点之前需要获取数据库里新添加的id作为节点的id
                            //如果存在v-model获取输入的值
                            if (this.newOrgLabel3) {
                                const label = this.newOrgLabel3;
                                const newChild = { id: nodeId, label, children: [] };
                                //如果右键点击的事件获取到了node，并且node存在子节点  
                                if (!this.contextNode3.children) {
                                    this.$set(this.contextNode3, 'children', []);
                                }
                                this.contextNode3.children.push(newChild);
                                // 表单隐藏
                                this.addOrgDialogVisible3 = false
                                G.toask('添加章节成功')
                            }
                        }
                    })


                },
                // 2、右边删除
                remove(node, data) {
                    // console.log("node", node);
                    // console.log("data", data);

                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        const parent = node.parent;
                        const children = parent.data.children || parent.data;
                        const index = children.findIndex(d => d.id === data.id);
                        // console.log("index", index);
                        // console.log("children", children);
                        // console.log("parent",parent);


                        children.splice(index, 1);



                        // console.log("data.id", data.id);
                        G.delete('{JAVAURL}/sp-chapter/deleteByid?id=' + data.id)
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                /* 1111111111111111111111111111 tree自带的方法 11111111111111111111111111111111 */




                /* 1111111111111111111111111111 覃泳淇定义的数据 11111111111111111111111111111111 */
                // 对话框方法
                confirmAppend() {
                    if (this.newLabel.trim()) {
                        this.append(this.currentNode, this.newLabel);
                        this.dialogVisible = false; // 关闭对话框
                    } else {
                        this.$message.error('节点名称不能为空');
                    }
                },

                // 右键打开对话框的实际增删改实现
                confirmAddOrg() {
                    // trim() 是 JavaScript 字符串的内置方法，用于 移除字符串首尾的空格。
                    if (this.newOrgLabel.trim()) {

                        let addOrgForm = {
                            // 根据实际需求填写正确的参数
                            parentId: this.contextNode.id,   //v-model获取右键点击的值
                            name: this.newOrgLabel,    //v-model获取输入的值
                            type: this.nodes.level,
                            spCourseId: this.selectedCourseId
                        };
                        // console.log("addOrgForm", addOrgForm);
                        G.post('{JAVAURL}/sp-chapter/chapterAdd', addOrgForm).then(res => {
                            if (!res.errorMsg) {
                                // console.log("res", res);
                                let nodeId = res.data.id

                                //3、新增节点之前需要获取数据库里新添加的id作为节点的id
                                //如果存在v-model获取输入的值
                                if (this.newOrgLabel) {
                                    const label = this.newOrgLabel;
                                    const newChild = { id: nodeId, label, children: [] };
                                    //如果右键点击的事件获取到了node，并且node存在子节点  
                                    if (!this.contextNode.children) {
                                        this.$set(this.contextNode, 'children', []);
                                    }
                                    this.contextNode.children.push(newChild);
                                    // 表单隐藏
                                    this.addOrgDialogVisible = false
                                    G.toask('添加章节成功')
                                }
                            }
                        })

                    } else {
                        this.$message.error('子分组名称不能为空');
                    }
                },
                confirmEditOrg() {
                    if (this.editOrgLabel.trim() && this.editOrgLabel !== this.currentOrgLabel) {
                        // 构建修改分组名称的数据对象并调用接口
                        let editOrgForm = {
                            id: this.contextNode.id,
                            name: this.editOrgLabel   //输入修改的名称
                        };
                        G.put('{JAVAURL}/sp-chapter/chapterUpdate', editOrgForm).then(res => {
                            if (!res.errorMsg) {
                                console.log("res", res);
                                G.toask('修改分组名称成功');
                                this.editOrgDialogVisible = false;
                                // 更新界面显示的名称
                                this.contextNode.label = this.editOrgLabel;
                                // 刷新数据列表（如果需要）
                                // this.getList();
                            }
                        });
                    } else {
                        this.$message.error('分组名称未修改或不能为空');
                    }
                },
                /* 1111111111111111111111111111 覃泳淇定义的数据 11111111111111111111111111111111 */

                // tree自带的点击事件方法，用于刷新list，但是太慢了我没有定义
                handleNodeClick(data) {
                    // console.log(data);
                    // this.getList(data.id);
                    
                },

                //获取数据列表
                getList() {
                    G.get('{JAVAURL}/sp-practice/treeChapter', { courseId: this.selectedCourseId || '1313921323726012416' }).then((chapter) => {
                        console.log("chapter.data", chapter.data)
                        this.datas = chapter.data;

                    });
                }
                ,
                //获取课程
                getSpCoursedata() {
                    G.get('/api/model/sp_course').then(res => {
                        this.SpCoursedata = res
                        // 默认选中最后一项
                        // if (this.SpCoursedata.length > 0) {
                        //     this.selectedCourseId = this.SpCoursedata[this.SpCoursedata.length - 1].id;
                        // }
                    })
                },
                //切换课程
                fetchChapterList() {
                    // 使用选中的 courseId 发送请求
                    G.get('{JAVAURL}/sp-practice/treeChapter', { courseId: this.selectedCourseId }).then((chapter) => {
                        console.log("chapter.data", chapter.data);
                        this.datas = chapter.data;
                    }).catch((error) => {
                        console.error('Error fetching chapter list:', error);
                    });
                }

            },
            mounted: function (query) {
                _this = this,
                    this.getSpCoursedata();
                this.getList();

            }
        }));
    })(Y)
</script>
<style scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }

    .treeMenu {
        font-size: 14px;
        position: fixed;
        padding: 2px 0px 5px;
        z-index: 99999;
        top: 50%;
        left: 50%;
        background-color: rgba(255, 255, 255, 0.9);
        overflow: hidden;
        border-radius: 5px;
        border: 1px solid #e6ebf5;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

        div {
            padding: 2px 10px;
            box-sizing: border-box;
            text-align: left;
        }

        div:hover {
            background-color: #eee;
            cursor: pointer;
        }
    }

    .el-popup-parent--hidden {
        padding-right: 0 !important;
    }

    /* .el-dialog__body {
        padding: 0 !important;
    } */
</style>